<template>
  <div class="song-list">
    <el-row :gutter="24">
      <el-col :span="4"><div class="grid-content bg-purple left">
        <div class="left-box">1</div>
        </div></el-col>
      <el-col :span="16">
        <div class="grid-content bg-purple content">
          <div class="center">
            <div class="title">
              <h3>全部</h3>
              <button @click="Show">全部分类</button>
                <div class="cd" v-show="isShow">
                    <h3 class="u-btn">全部风格</h3>
                    <dl v-for="(item,index) in songtag.categories" :key="index" class="tag-cover">
                      <dt class="f-cb">
                      <i class="u-icn u-icn-71">{{item}}</i>
                      </dt>
                    <dd v-for="song in songs(index)" :key="song.id" class="s-fc1">
                        <span class="s-fc2">{{song.name}}|</span>
                    </dd>
                  </dl>
              </div>
              <button class="hot">热门</button>
            </div>
            <div class="Allmusic">
              <ul>
                <li v-for="item in playlists" :key="item.id">
                  <div class="song-cover">
                    <img :src=item.coverImgUrl  alt="" >
                    <a href=""><i class="el-icon-video-play"></i></a>
                    <a href=""><i class="el-icon-headset">{{item.playCount}}</i></a>
                  </div>
                  <p class="Disc-name"><a href="">{{item.name}}</a></p>
                  <span>by&nbsp;</span>
                  <span class="singer"><a href="">{{item.creator.nickname}}</a></span>
                </li>
              </ul>
              <el-row :gutter="20">
              <el-col :span="12" :offset="6">
                <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                @prev-click="prev"
                @next-click="next"
                @current-change="change"
                class="page"
                >
              </el-pagination></el-col>
              </el-row>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="4"><div class="grid-content bg-purple right"></div></el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data: () => ({
    playlists: [],
    songtag: {},
    isShow: false,
    page:1,
    total:380,
  }),
  created() {
    this.getSongListTag()
    this.getALLSongList()
  },
  methods: {
    Show () {
        this.isShow = !this.isShow
    },
    prev (){
      this.page--
      this. getALLSongList()
    },
    next (){
      this.page++
      this.getALLSongList()
    },
    change (page){
      this.page = page;
      this.getALLSongList()
    },
    async getALLSongList () {
      try {
        const {data: { playlists } } = await this.Api.yrnApi.getALLSongList(this.page)
        this.playlists = playlists
      } catch (error) {
         console.log('获取歌单数据失败.....')
      }
    },
     async getSongListTag () {
      try {
       const { data } = await this.Api.yrnApi.getSongListTag()
       this.songtag = data
       console.log(this.songtag)
      } catch (error) {
         console.log('获取歌单列表失败.....')
      }
    },
      songs (index) {
        var songs  = this.songtag.sub.filter(item => {
              if(item.category == index){
                return item
              }
          });
          return songs
      }
  }
};
</script>
<style lang="less" scoped>
  .song-list {
    ul,li {
      list-style: none;
    }
    .left {
      background-color:rgb(245, 245, 245) ;
      .left-box {
        color:(rgb(245, 245, 245) );
      }
    }
    .right {
      background-color:rgb(245, 245, 245) ;
    }
    .content {
      background-color: #fff;
      border-left: 1px solid gray;
      border-right: 1px solid gray;
      .center {
        margin-left: 50px;
        margin-right: 50px;
        .title {
          padding-top:45px;
          border-bottom:2px solid #c20c0c;
          h3 {
            font-size:24px;
            font-weight: normal;
            margin-bottom: 8px;
          }
          .cd {
            z-index:9999;
            border:1px solid #ccc ;
            .u-btn {
              width: 75px;
              height: 26px;
              font-size: 16px;
              text-align: center;
              line-height: 26px;
            }
          }
           .tag-cover{
            display: flex;
            justify-content: space-around;
            width: 750px;
            border: 1px solid #ccc;
            font-size:14px;
            .f-cb{
              width: 50px;
              height: 50px;
              margin-right:50px;
            }
            .s-fc1{
              width: 500px;
              display: flex;
              flex-wrap: wrap;
              .s-fc2{
                height: 30px;
              }
            }
            }
          .hot {
            position: relative;
            left: 670px;
            background-color: red;
            color: #fff;
            width: 48px;
            height: 29px;
            border-radius: 3px;
          }
        }
        .Allmusic{
          ul {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            .song-cover {
            width: 150px;
            height: 150px;
              img {
              border: 1px solid black;
              width: 100%;
              height: 100%;
              }
              .el-icon-video-play {
                position: relative;;
                left: 130px;
                top: -27px;
                font-size: 17px;
                color: #ccc;
              }
              .el-icon-headset {
                position: relative;;
                left: -15px;
                top: -22px;
                font-size: 17px;
                color: #ccc;
              }
            }
            li{
              margin-top: 10px;
              margin-bottom: 20px;
              width: 160px;
            }
            .Disc-name {
              a{
                max-width:160px;
                text-decoration: none;
                display: inline-block;
                vertical-align: middle;
                white-space:nowrap;
                color: #000;
                text-overflow: ellipsis;
                overflow: hidden;
              }
            }
            .singer {
              margin-top: 5px;
              margin-bottom:5px;
              a {
                text-decoration: none;
                color: #000;
              }
            }
          }         
        }
      }
    }
  }
</style>
